<template>
	<div class="hotedit">
		<!-- Hotedit区域 -->
		<div class="hotedit_header">
			<h3>热点管理</h3>
		</div>
		<div class="hotedit_middle">
			<p><span>描述</span><input type="text" v-model.trim.lazy="memo"></p>
			<p><span>热度</span><input type="text" v-model.trim.lazy="hot"></p>
			<p><span>类型</span><input type="text" v-model.trim.lazy="type"></p>
			<p><span>图片</span><input type="file" ref="pic"></p>
			<router-link to="/adm/hot">返回</router-link>
			<button @click="addpic()">上传</button>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'Hotedit',
		data(){
			return {
				memo : '购物中心首页头部轮播图片',
				hot : 1,
				type : 1,
				pic : ''
			}
		},
		methods:{
			// 提交轮播数据
			addpic(){
				// this.$refs指向被ref属性绑定的标签元素
				// 上传框的value属性是files,被上传的文件具体信息
				// this.$refs.pic.files所上传的文件完整数据
				// console.log( this.$refs.pic.files );		
				let fs = this.$refs.pic.files;		//获取的是图片数据
				console.log(fs);
				if( fs.length > 0 && fs[0] != '' && this.memo != '' && this.hot != '' && this.type != '' ){
					// 创建一个空的表单对象数据
					let fd = new FormData();
					// 将需要打包的数据,append方式提交给对象
					fd.append( 'memo' , this.memo );
					fd.append( 'hot' , this.hot );
					fd.append( 'type' , this.type );
					fd.append( 'pic' , fs[0] );
					// 发起post请求
					/*
						请求地址		http://127.0.0.1:8090/api/adm/hot/addHot
						提交的数据	fd
						表头配置		header :{ 'Content-Type' : 'multipart/form-data' }
					*/
				   this.axios.post( '/api/adm/hot/addHot' , fd , { header : { 'Content-Type' : 'multipart/form-data' } } ).then( (res)=>{
						if( res.data.code === 200 ){
							// 请求成功后,返回查询页
							this.$router.push( '/adm/hot' );
						}
					} ).catch( (error)=>{
						console.log(error);
				   } );
				}
			}
		}
	}
</script>

<style scoped>
	.hotedit{
		width: 100%;
		height: 100%;
		background-color: pink;
	}
	.hotedit .hotedit_header{
		width: 100%;
		float: left;
	}
	.hotedit .hotedit_middle{
		width: 100%;
		float: left;
	}
	.hotedit .hotedit_header h3{
		width: 20%;
		line-height: 55px;
		font-size: 25px;
		text-align: center;
		cursor: pointer;
		float: left;
	}
	.hotedit .hotedit_middle a{
		width: 15%;
		line-height: 55px;
		border-radius: 6px;
		border: 0;
		margin-left: 24%;
		background-color: skyblue;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
		text-decoration: none;
		color: black;
		float: left;
	}
	.hotedit .hotedit_middle p{
		width: 50%;
		margin-left: 25%;
		line-height: 55px;
		font-size: 20px;
	}
	.hotedit .hotedit_middle p span{
		font-weight: bold;
	}
	.hotedit .hotedit_middle p input{
		width: 50%;
		line-height: 35px;
		margin-left: 15px;
		border-radius: 6px;
		border: 0;
		outline: none;
		text-indent: 1em;
	}
	.hotedit .hotedit_middle p button{
		margin-left: 35px;
		margin-right: 30px;
		width: 20%;
		height: 35px;
		border-radius: 6px;
		border: 0;
		cursor: pointer;
		background-color: #4169E1;
		color: white;
		font-size: 16px;
	}
	.hotedit .hotedit_middle button:nth-child(6){
		width: 15%;
		line-height: 55px;
		border-radius: 6px;
		border: 0;
		margin-left: 2%;
		background-color: skyblue;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		float: left;
	}
	.hotedit .hotedit_middle button:nth-child(6):hover,.hotedit .hotedit_middle a:hover{
		background-color: red;
		color: gold;
	}
</style>
